/************************************************************************************
Bigger screens
*************************************************************************************/

@media screen and (min-width: 1600px) {

	
}




/************************************************************************************
iPad (specific tunning)
*************************************************************************************/

@media only screen and (device-width: 768px) {
  /* For general iPad layouts */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* For portrait layouts only */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
  /* For landscape layouts only */
  
  
}



/************************************************************************************
smaller than 960
*************************************************************************************/
@media screen and (max-width: 960px) {
  
	/*===== Turning OFF stuff =====*/
	#top-L { display: none;}
	
	
  	/*===== Turning ON stuff =====*/
	
	
	/*===== Headings N font sizes =====*/
		
	
	/*===== Header stuff =====*/
	#logo, #top-R {float: none; clear: both; text-align: center; margin: 0 auto;}
	#logo { max-width: 300px;}
	#top-R { width: 100%; padding: 0;}
	#nav { width: 100%;}
	
	
	/*===== Content stuff =====*/
	#theLocks img { width: 49.5%; margin: 0.25%;}
	
	
	/*===== Footer stuff =====*/
	#footer-Logo, #footer-Contact { width: 100%; float: none; clear: both; text-align:  center;}
	#footer-Logo { width: 40%; margin: 20px auto;}
	#footer-Contact a { padding: 0 2%;}

	

}


/************************************************************************************
smaller than 650
*************************************************************************************/
@media screen and (max-width: 650px) {

  	/*===== Turning OFF stuff =====*/
	#nav { display: none;}
	
  
  	/*===== Turning ON stuff =====*/
	
	
	/*===== Layout stuff =====*/
	.colX2 { width: 100%; margin: 10px auto; float: none; clear: both;}
	
	
	/*===== Header stuff =====*/
	#header { height: auto; padding: 20px 0;}
	#logo {  width: 50%; padding: 0;}
	#top-R p { margin: 10px 0;}

	
	/*===== Headings N texts =====*/
	body { font-size: 18px;}
	
	/*===== introBox =====*/
	#introBox { padding: 40px 0;}
	#theIntro { font-size: 18px;}
	#introBox .theSmallWrapper { width: 90%;}
	#theIntro {}
	
	
	/*===== Servicios =====*/
	#theForm { width: 90%;}
	
	
	/*===== ShowBox =====*/
	#showBox img { width: 100%; float: none; clear: both; max-height: auto;}
	#show-L, #showVid, #show-R { width: 100%; float: none; clear: both;}
	#showVid video { margin-top: 0;}
	
	
	/*===== Footer stuff =====*/
	#footer { padding: 20px 0;}
	#footer a { display: block; padding: 5px 0; float: none; clear: both;}
	#footer-Logo { margin: 20px auto 0 auto;}
	
	
	/*===== Distribu stuff =====*/
	.colX50, #candados-Pics, #candados-Facts { width: 100%; float: none; clear: both;}
	

	
	

}

/************************************************************************************
smaller than 560
*************************************************************************************/
@media screen and (max-width: 480px) {

  /* disable webkit text size adjust (for iPhone) */
  html {
    -webkit-text-size-adjust: none;
  }

}